<template>
	<view style="padding-bottom: 200rpx;">
		<view class="banner">
			 <u-swiper
					:list="list6"
					@change="e => currentNum = e.current"
					:autoplay="false"
					indicatorStyle="right: 20px"
			>
				<view
						slot="indicator"
						class="indicator-num"
				>
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
				</view>
			</u-swiper>
		</view>
		<view class="rig">
			<view class="jlb">
				<span>钓鱼岛二哥垂钓俱乐部</span>
				<span style="color: red;">收费：150/天</span>
			</view>
			<view class="lei">
				<view class="ly">路亚</view>
				<view class="td">台钓</view>
				<view class="kzs" style="background-color: #FFEFEA; width: 87rpx; color: #F67A4F;">可住宿</view>
			</view>
			
			<view class="yu" style="margin-top: 24rpx;">
				<span style="color: #333333; padding-top: 24rpx;">鱼种：</span>草鱼、鲤鱼、草鱼、青鱼100米
			</view>
			<view class="line"></view>
			<view class="address">
				<view class="jl">
					<view class="" style="display: flex;">
						<view class="" style="padding-top: 15rpx;">
							<image  style="margin-right: 10rpx; width: 26rpx; height: 35rpx;" src="../../static/dingwei01.png" mode=""></image>
						</view>
						<view class="" >
							<span>四川省成都市双流区安中路100米</span>
							<view class="" style="color: #4F98F6;margin-top: 15rpx;"><span>住宿拨打电话</span></view>
						</view>
					</view>
					<image src="../../static/dianhua.png" mode="" style="width: 37rpx; height: 37rpx;"></image>
				</view>
			</view>
		<!-- 	<view class="sf">
				收费：150/天
			</view> -->
			
		</view>
		<view class="instruce">
			<view class="name">水库介绍</view>
			<view class="content">
				钓场位于四川省成都市双流区北侧200米附近。交通便利、景色优美，是休闲娱乐钓鱼的好低分
			</view>
		</view>
		<view class="mk">
			<view class="name">
				打窝价格
			</view>
			<view class="wo" v-for="item of 5" :key="item">
				<image src="../../static/logo.png" mode="widthFix"></image>
				<view class="liao">
					<view class="er">鳊鱼专用饵料</view>
					<view class="ci">30/次</view>
				</view>
			</view>
			
		</view>
		<view class="foot">
			<!-- <view class="rule">根据钓场规定，开钓前24小时，不能取消订单</view> -->
			<button @click="open">立即预订</button>
		</view>
		
		<!-- 弹窗 -->
		<view class="tanchu">
			<u-popup :show="show" mode="bottom" 
			:safeAreaInsetBottom="true"
			:safeAreaInsetTop="true"
			round="10"
			overlay="true"
			closeable="true"
			closeOnClickOverlay="true"
			@close="close"
			>
				<view class="uni-list">
					<view class="account">账号选择</view>
					<radio-group @change="radioChange">
						<label class="uni-list-cell" v-for="(item, index) in items" :key="item.value">
							<!-- <view class="wo" v-for="item of 5" :key="item"> -->
								<image class="img" src="../../static/logo.png" mode="widthFix"></image>
								<view class="liao">
									<view class="er">鳊鱼专用饵料</view>
									<view class="ci">30/次</view>
									<view class="num">
										<view style="margin-top: 10rpx;">次数：</view>
										<button @click.stop="reduce" >-</button>
										<input type="text" v-model="number" ></input>
										<button @click.stop="add" style="margin-right: 20rpx;">+</button>
										<!-- <radio :value="item.value" :checked="index === current" /> -->
									</view>
								</view>
							<!-- </view> -->
							
						</label>
					</radio-group>
					<!-- <view class="b"></view> -->
					<view class="" style="display: flex; justify-content: space-between;">
						<button class="btn1" @click="confirm" style="color: #3681F3;">暂不选择</button>
						<button class="btn1" @click="confirm" style="background-color: #3681F3;">确定</button>
					</view>
				</view>
			</u-popup>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list6: [
						'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						'https://cdn.uviewui.com/uview/swiper/swiper3.png',
						'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					],
					currentNum:0,
					show: false,
					current: 0,
					number:1,
					items: [{
							value: 'USA',
							name: '微信钱包',
							img:'../../static/icon_zhifubao.png',
							
						},
						{
							value: 'CHN',
							name: '中国工商银行储蓄卡(0379)',
							img:'../../static/yinlian.png'
						},
						{
							value: 'BRA',
							name: '中国建设银行储蓄卡(2586)',
							img:'../../static/yinlian.png'
						},
						
					],
					
			};
		},
		methods:{
			open(){
				this.show = true
				console.log('open')
			},
			close() {
					this.show = false
					console.log('close');
				},
			 radioChange: function(evt) {
			            for (let i = 0; i < this.items.length; i++) {
			                if (this.items[i].value === evt.detail.value) {
			                    this.current = i;
			                    break;
			                }
			            }
			        },
						
			confirm(){
				this.show = false
				uni.navigateTo({
					url:('/pages/index/orderDetail')
				})
			},
			add(){
				let that = this
				that.number = that.number+1
				console.log("++++")
			},
			reduce(){
				if(this.number==1){
					uni.showToast({
						title:'亲已经是最少了~',
						icon:'none',
						duration:1000
					})
				}else{
					this.number--
				}
				
			}
		}
	}
</script>

<style lang="scss">
	  .indicator {
			@include flex(row);
			justify-content: center;
	
			&__dot {
				 height: 6px;
				 width: 6px;
				 border-radius: 100px;
				 background-color: rgba(255, 255, 255, 0.35);
				 margin: 0 5px;
				 transition: background-color 0.3s;
		
				&--active {
					 background-color: #ffffff;
				 }
			}
		}
	
		.indicator-num {
			padding: 2px 0;
			background-color: rgba(0, 0, 0, 0.35);
			border-radius: 100px;
			width: 35px;
			@include flex;
			justify-content: center;
	
			&__text {
				 color: #FFFFFF;
				 font-size: 12px;
			 }
		}
		// 
		.rig{
			padding: 25rpx 33rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #666666;
			background-color: #fff;
		}
		.jlb{
			display: flex;
			justify-content: space-between;
			font-weight: bold;
			font-size: 29rpx;
			color: #333333;
		}
		.lei{
			display: flex;
			margin-top: 27rpx;
			>view{
				margin-right: 16rpx;
				width: 67rpx;
				height: 30rpx;
				background: #E0EEFF;
				border-radius: 4rpx;
				// width: 67rpx;
				// height: 30rpx;
				text-align: center;
				line-height: 30rpx;
			}
		}
		.jl{
			margin: 25rpx 0;
			display: flex;
			justify-content: space-between;
			image{
				width: 18rpx;
				height: 23rpx;
			}
		}
		.sf{
			font-weight: bold;
			font-size: 27rpx;
			color: #F01B1B;
			margin-top: 27rpx;
		}
		// 
		.line{
			// width: 697rpx;
			height: 1rpx;
			background: #F5F5F5;
			margin-top: 26rpx;
			margin-bottom: 30rpx;
		}
		.instruce{
			margin: 13rpx 0;
			padding: 25rpx 32rpx;
			background-color: #fff;
		}
		.name{
			font-weight: bold;
			font-size: 29rpx;
			color: #333333;
			margin-bottom: 26rpx;
		}
		.content{
			font-weight: 500;
			font-size: 24rpx;
			color: #333333;
		}
		.mk{
			margin: 20rpx 27rpx;
			
		}
		.wo{
			margin: 20rpx 0;
			padding: 17rpx 31rpx;
			background-color: #fff;
			border-radius: 20rpx;
			display: flex;
			image{
				width: 167rpx;
				margin-right: 23rpx;
			}
		}
		.er{
			font-weight: bold;
			font-size: 27rpx;
			color: #333333;
			margin-bottom: 33rpx;
		}
		.ci{
			font-weight: bold;
			font-size: 29rpx;
			color: #EE1616;
		}
		.foot{
			position: fixed;
			bottom: 0;
			margin: 0 27rpx 30rpx;
			
		}
		.rule{
			
			margin-bottom: 12rpx;
			background: #FFD2D2;
			border-radius: 13rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #F51D1D;
			padding: 18rpx 0;
			text-align: center;
			width: 697rpx;
		}
		button{
			width: 697rpx;
			height: 93rpx;
			background: #3681F3;
			border-radius: 20rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
		}
		
		// 弹窗
		.u-popup-slot {
				width: 200px;
				height: 150px;
				@include flex;
				justify-content: center;
				align-items: center;
			}
		.uni-list-cell{
			display: flex;
			// justify-content: space-between;
			// height: 120rpx;
			margin: 20rpx 0;
			background: #FFFFFF;
			border-radius: 20rpx;
			border: 1px solid #3681F3;
			padding: 17rpx 31rpx;
		}
			.uni-list{
				margin: 32rpx 40rpx;
			}
			.account{
				width: 100%;
				text-align: center;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				line-height: 32rpx;
				margin-bottom: 50rpx;
			}
			.aount{
				display: flex;
				// justify-content: space-between;
			}
			.imgRadio{
				width: 53rpx;
				// height: 33rpx;
				margin-top: 10rpx;
				margin-right: 20rpx;
			}
			.btn1{
				width: 333rpx;
				height: 80rpx;
				background: #EDF4FF;
				border-radius: 13rpx;
				margin-bottom: 50rpx;
				font-weight: bold;
				font-size: 29rpx;
				
			}
			.img{
				width: 167rpx;
				margin-right: 23rpx;
			}
			.num{
				font-weight: 500;
				font-size: 27rpx;
				color: #333333;
				margin-top: 30rpx;
				margin-left: 150rpx;
				display: flex;
				>button{
					width: 58rpx;
					height: 58rpx;
					border-radius: 7rpx 0rpx 0rpx 7rpx;
					border: 1px solid #E6E6E6;
					// text-align: center;
					line-height: 47rpx;
					// padding-right: 10rpx;
					padding: 0;
					background-color: #fff;
					color: #333333;
				}
				input{
					width: 47rpx;
					height: 47rpx;
					border: 1px solid #E6E6E6;
					text-align: center;
				}
			}
			
</style>
